Firebaseアプリデプロイ

概要

動画を作ったついでのメモ。

IMAGE ALT TEXT HERE

前提

・Firebase CLIをインストール済み
・Firebase CLIにログイン済み
・LinuxまたはMAC
・nanoがインストール済み

コマンド

main
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

# アプリケーションフォルダ作成  
mkdir {appname}  
  
# フォルダ内に移動  
cd {appname}  
  
# カレントフォルダをFirebaseで初期化  
firebase init  
  
# 利用するサービスの選択。(単純なホームページであればHostingでOK)  
# スペースで選択し、エンターで次に  
>? Which Firebase CLI features do you want to set up for th>is folder? Press Space to select features, then Enter to confirm your choi  
>ces. (Press <space> to select, <a> to toggle all, <i> to invert selection)  
> ◯ Database: Deploy Firebase Realtime Database Rules  
> ◯ Firestore: Deploy rules and create indexes for Firestore  
>❯◯ Functions: Configure and deploy Cloud Functions  
> ◯ Hosting: Configure and deploy Firebase Hosting sites  
> ◯ Storage: Deploy Cloud Storage security rules  
> ◯ Emulators: Set up local emulators for Firebase features  
  
# プロジェクトをどうするか？基本的にGCPに紐付いている。  
# あまり考えたくなければ「Create a new project 」で良い  
>? Please select an option: (Use arrow keys)  
>❯ Use an existing project   
>  Create a new project   
>  Add Firebase to an existing Google Cloud Platform project   
>  Don t set up a default project   
  
# 作成するプロジェクト名6-30で既存のものにかぶらないように  
>? Please specify a unique project id (warning: cannot be modified afterward) [6-30 characters]:  
> ()   
  
# プロジェクトの呼び名？プロジェクト名そのままであればエンターでOK  
>? What would you like to call your project? (defaults to your project ID) ()  
  
# ホームページを設置するフォルダ名の指定、初期値はpublicなのでそのままエンターでOK  
>? What do you want to use as your public directory? (public)   
  
# すべての要求をindex.htmlに集約するかどうか？  
# SPAにする場合はYES  
>? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)   
  
# --これでFirebaseへの登録は完了--  
# HTMLを設置するパブリックフォルダへ移動  
cd public  
  
# 存在するindex.htmlを削除  
rm index.html  
  
# 新規にindex.htmlを作成  
nano index.html  
>こんにちわ ホームページです。  
  
# カレントフォルダに戻る  
cd ..  
  
# クラウドにデプロイする  
firebase deploy  
>Project Console: https://console.firebase.google.com/project/{appname}/overview  
>Hosting URL: https://{appname}.firebaseapp.com  
  
# >Hosting URL: https://{appname}.firebaseapp.com  
# を参照にデプロイしたページを確認する